<template>
    <div class="container">
        <section>
            <h1>游戏数值</h1>
            <section class="show-area">
                <Token v-for="option in tokenIntroList" :key="option.type" :type="option.type" size="min(36px,4vw)">
                </Token>
            </section>
        </section>
        <section>
            <h1>游戏状态</h1>
            <section class="show-area">
                <State v-for="option in stateIntroList" :key="option.type" :type="option.type" size="min(36px,4vw)">
                </State>
            </section>
        </section>
        <section>
            <h1>凶吉卡</h1>
            <section class="show-area">
                <FateCard type="good" turned-over></FateCard>
                <FateCard type="good"></FateCard>
                <FateCard type="bad"></FateCard>
            </section>
        </section>
    </div>
</template>

<script lang="ts" setup>
import FateCard from '@/components/game/card/fate-card.vue';
import State from '@/components/game/state.vue';
import Token from '@/components/game/token.vue';
import { stateIntroList } from '@/game/intro/state';
import { tokenIntroList } from '@/game/intro/token';
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 1vh 1vw 0 1vw;
}

.container>section {
    margin: 1vh 0;
}

.show-area {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 2vw;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1vh 0;
}
</style>